<template>
  <view class="home_page">
    <!-- 加载动画 -->
    <u-navbar :is-back="false" title=" " :background="{ background: '#EC681B' }">
      <view class="slot-wrap" @click="GeaUap"> 
	     <text>松江大橘邻里</text>
		 <u-icon name="arrow-down" color="#fff" size="28"></u-icon>
	 </view>
    </u-navbar>
    <view class="loading-container" v-if="isLoading">
      <view class="loading-animation">
        <view class="loading-dot"></view>
        <view class="loading-dot"></view>
        <view class="loading-dot"></view>
      </view>
      <text class="loading-text">加载中...</text>
    </view>
    <!-- 页面内容 -->
    <view class="page-content" :class="{ 'page-loaded': !isLoading }">
      <!-- 轮播模块 -->
      <view class="swiper" v-animate-on-scroll>
        <u-swiper :list="sortedBannerList" :height="500" name="imageUrl"></u-swiper>
      </view>

      <!-- 切换模块 -->
      <view class="selce" v-animate-on-scroll>
        <view class="selce_itme" v-for="(itme, index) in scleclist" :key="index" @click="Navigator(itme.url,index)">
          <view class="icon">
            <image :src="'/static/home/b' + (1 + index) + '.png'" mode="widthFix"></image>
            <view>{{itme.name}}</view>
            <button type="default" open-type="contact" v-if="index == 4">
            </button>
          </view>
        </view>
      </view>

      <!-- 用户 -->
      <view class="user" v-animate-on-scroll :style="!userInfo.phone ? 'height:auto' : ''">
        <image class="bg" src="/static/home/us.png" v-if="userInfo.phone"></image>
        <view class="user_from"  v-if="userInfo.phone">
          <view class="left">
            <view class="user_image">
              <image :src="userInfo.avatar || '/static/my/mr.png'" mode=""></image>
			  <!-- <image src="/static/my/mr.png" mode=""></image> -->
            </view>
            <view style="display: flex; flex-direction: column;align-items: center;">
              <view class="name">{{userInfo.nickname}}</view>
              <view class="iocn">
                <image src="/static/home/zs.png" mode="widthFix"></image>
                <view>大橘卡</view>
              </view>
            </view>
          </view>
          <view class="right">
            <view class="jf">
              <view class="top">
                <image src="/static/home/jf.png" mode="widthFix"></image>
                <view>积分</view>
              </view>
              <view class="sum">{{userInfo.credit}}</view>
            </view>
            <view class="jf">
              <view class="top">
                <image src="/static/home/yhq.png" mode="widthFix"></image>
                <view>优惠券</view>
              </view>
              <view class="sum">{{userInfo.couponCount}}</view>
            </view>
          </view>
        </view>
        <view class="login" v-else>
          <image src="/static/my/mr.png" mode="widthFix"></image>
          <view class="login_btn" @click="()=> zheshow = !zheshow">登录</view>
        </view>
      </view>
      <!-- 热门活动 -->
      <view class="activity" v-animate-on-scroll>
        <view class="heders">
          <view class="name">热门活动</view>
          <view class="right"  @click="NaviTator('/pages/activity/index')">查看更多<u-icon name="arrow-right" color="#9a9a9a" size="28"></u-icon></view>
        </view>
        <view class="hod_list">
          <view class="cor_img" v-for="(itme,index) in aclist.slice(0,4)" :key="index" @click="viewDetail(itme.id)">
            <image :src="'https:' + itme.coverImage" mode=""></image>
          </view>
        </view>
      </view>
      <view class="banner" @click="Navigator('/pages/reservation/index')">
        <image :src="'https://img.shihhl.com/shequ/banner%20%281%29.png'" mode="widthFix"></image>
      </view>
      <!-- 积分商城 -->
	  <view v-animate-on-scroll>
      <view class="points"  v-if="prlist.length > 0">
        <view class="heders" style="margin-bottom: 20rpx;">
          <view class="name">积分商城</view>
          <view class="right" @click="Navigator('/pages/points/index')">查看更多<u-icon name="arrow-right" color="#9a9a9a" size="28"></u-icon></view>
        </view>
        <ProductList :PrList="prlist" :isLoaded="true" />
      </view>
    </view>
	</view>
    <Butogin :zheshow='zheshow' @colse="(e)=> zheshow = false"/>
	<u-select v-model="selec_show" :list="list" @confirm="confirm"></u-select>
  </view>
</template>

<script>
import { creditProduct, activity, BannerList } from '@/core/api/index.js';
import { mapState } from 'vuex';

export default {
  data() {
    return {
      scleclist: [
        { name: '停车缴费', url: "./parking" },
        { name: '活动报名', url: "/pages/activity/index" },
        { name: '自助积分', url: "/pages/receipt/index" },
        { name: '大橘便民', url: "/pages/community/index" },
        { name: '联系客服' }
      ],
      listbanner: [],
      prlist: [],
      aclist: [],
      isLoaded: false,
      isLoading: true,
      zheshow: false,
	  selec_show:false,
	  list: [
			{
				value: '1',
				label: '嘉定大橘邻里',
			}
		],
    };
  },
  computed: {
    // 计算属性：返回排序后的轮播图列表
    sortedBannerList() {
      // 浅拷贝避免修改原数组
      const bannerList = [...this.listbanner];
      
      // 排序逻辑：按sortOrder升序排列
      return bannerList.sort((a, b) => {
        // 处理sortOrder不存在或非数字的情况
        const orderA = parseInt(a.sortOrder) || 0;
        const orderB = parseInt(b.sortOrder) || 0;
        
        return orderA - orderB;
      });
    },
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  },
  onLoad() {
    this.CreditProduct();
    this.activity();
    this.BannerList();
  },
  methods: {
	confirm(e) {
		console.log(e);
		uni.navigateToMiniProgram({
		  appId: 'wx74165b958592066d',
		  path: 'pages/home/index',
		  success(res) {
		    // 打开成功
		  }
		})

	},
	GeaUap(){
		console.log(1)
		this.selec_show = true
	},
    Navigator(url, index) {
	  console.log(url)
	  // if(!this.userInfo.phone){
		  if(url == '/pages/receipt/index' && !this.userInfo.phone){
			  console.log('需要登录')
			  this.zheshow = true
			  return
		  }
	
	  // }
	  // return
      if (index == 1) {
        uni.switchTab({
          url
        })
        return
      }
      uni.navigateTo({
        url
      })
    },
    viewDetail(id) {
      uni.navigateTo({
        url: '/pages/activity/details?id=' + id
      })
    },
    NaviTator(url) {
      uni.switchTab({
        url
      })
    },
    async BannerList() {
      try {
        const { data } = await BannerList();
        console.log(data, 'lb');
        
        // 处理图片URL和排序
        if (Array.isArray(data)) {
          data.forEach(item => {
            item.imageUrl = 'https:' + (item.imageUrl || '');
            
            // 确保sortOrder为数字
            if (item.sortOrder !== undefined) {
              item.sortOrder = parseInt(item.sortOrder);
            }
          });
          
          // 赋值给listbanner，触发计算属性排序
          this.listbanner = data;
        }
      } catch (error) {
        console.error('获取轮播图数据失败:', error);
      }
    },
    async activity() {
      try {
        const res = await activity();
        console.log(res.data);
        this.aclist = res.data || [];
      } catch (error) {
        console.error('获取活动数据失败:', error);
      }
    },
    async CreditProduct() {
      try {
        const res = await creditProduct({ page: 1, size: 6 });
        this.prlist = res.data.records || [];
        this.isLoaded = true;
      } catch (error) {
        console.error('数据加载失败:', error);
      } finally {
        // 延迟隐藏加载动画，确保数据完全准备好
        setTimeout(() => {
          this.isLoading = false;
        }, 500);
      }
    }
  }
};
</script>

<style>
page {
  background-color: #F8F8F8;
}
</style>

<style lang="scss" scoped>
  .slot-wrap{
	  background-color: #EC681B;
	  padding-left: 35rpx;
	  text{
		  margin-right: 10rpx;
		  color: #fff;
	  }
  }
  button {
    border: none;
    background: none;
    width: 100%;
    text-align: right;
    justify-content: center;
    font-size: 28rpx;
    color: rgba(125, 125, 125, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    line-height: 0;
    height: 100%;
    position: absolute;
    top: 0%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 !important;
    image {
      width: 100%;
    }
  }
  button::after {
    border: none;
  }
  /* 加载动画样式 */
  .loading-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 200;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .loading-animation {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15rpx;
  }
  
  .loading-dot {
    width: 15rpx;
    height: 15rpx;
    border-radius: 50%;
    background-color: #EF7B3A;
    margin: 0 10rpx;
    animation: loading 1.4s infinite ease-in-out both;
  }
  
  .loading-dot:nth-child(1) {
    animation-delay: -0.32s;
  }
  
  .loading-dot:nth-child(2) {
    animation-delay: -0.16s;
  }
  
  @keyframes loading {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1.0); }
  }
  
  .loading-text {
    color: #EF7B3A;
    font-size: 28rpx;
  }
  
  .loading-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease-out;
    
    .spinner {
      width: 50rpx;
      height: 50rpx;
      border: 5rpx solid #1A73E8;
      border-radius: 50%;
      border-top-color: transparent;
      animation: spin 1s linear infinite;
    }
    
    .loading-text {
      margin-top: 20rpx;
      font-size: 30rpx;
      color: #666;
    }
  }
  
  .page-content {
    opacity: 0;
    transform: translateY(30rpx);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    
    &.page-loaded {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .animated {
    opacity: 0;
    transform: translateY(20rpx);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
    
    &.in-view {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .swiper {
    
  }
  .hod_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .cor_img {
      width: 47.2%;
      height: 200rpx;
      background-color: #fff;
      margin-bottom: 30rpx;
      border-radius: 20rpx;
      transform: translateY(20rpx);
      animation: fadeInUp 0.5s ease forwards;
      animation-delay: calc(var(--index) * 0.1s);
      image {
        width: 100%;
        height: 100%;
        border-radius: 20rpx;
      }
    }
  }
  .selce {
    display: flex;
    margin: 30rpx 0;
    padding: 0 10rpx;
    .selce_itme {
      width: 20%;
      display: flex;
      justify-content: center;
      .icon {
        width: 15vw;
        font-size: 26rpx;
        position: relative;
        image {
          width: 90%;
          height: auto;
        }
        view {
          font-weight: 600;
          margin-top: 9rpx;
        }
      }
    }
  }
  .user {
    width: 92%;
    margin: 40rpx auto;
    height: 123rpx;
    position: relative;
    .bg {
      width: 100%;
      height: auto;
      position: absolute;
      z-index: -1;
      height: 123rpx;
    }
    .user_from {
      display: flex;
      height: 100%;
      align-items: center;
      .user_image {
        margin-right: 40rpx;
        display: flex;
        align-items: center;
        image {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
        }
      }
      .left {
        padding-left: 20rpx;
        padding-right: 40rpx;
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        .name {
          font-size: 33rpx;
		   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
		   width: 100rpx;
        }
        .iocn {
          display: flex;
          margin-top: 10rpx;
          align-items: center;
          height: auto;
          image {
            width: 25rpx;
            height: auto;
          }
          view {
            color: #666666;
            font-size: 22rpx;
            margin-left: 10rpx;
          }
        }
      }
      .right {
        display: flex;
        padding-left: 50rpx;
        flex: 1;
        justify-content: space-around;
        .jf {
          display: flex;
          flex-direction: column;
          justify-content: center;
          .top {
            display: flex;
            font-size: 24rpx;
            margin-bottom: 5rpx;
            align-items: center;
            image {
              width: 35rpx;
              margin-right:9rpx;
            }
          }
          .sum {
            font-size: 28rpx;
            font-weight: 700;
            text-align: center;
          }
        }
      }
    }
    .login {
      display: flex;
      flex-direction: column;
      align-items: center;
      image {
        width: 100rpx;
      }
      .login_btn {
        background: var(--Color, #F26B2E);
        width: 173rpx;
        height: 60rpx;
        border-radius: 51rpx;
        color: #fff;
        text-align: center;
        line-height: 59rpx;
        font-size: 30rpx;
        margin: 20rpx 0;
      }
    }
  }
  .activity, .points, .banner {
    width: 92%;
    margin: 0rpx auto;
    .heders {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 5rpx;
      .name {
        font-size: 32rpx;
      }
      .right {
        color: #8b8b8b;
        font-size: 26rpx;
      }
    }
  }
  .banner {
    margin: 35rpx auto;
    image {
      width: 100%;
    }
  }
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style>